<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <div style="width: 300px">
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="b in arr">
        <img :src="b.url" width="100%" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>


  <div v-for="b in arr">
    <h3>{{b.des}} <a href="javascript:void(0)" @click="del(b.id)">删除</a></h3>
    <p>{{b.url}}</p>
    <img :src="b.url" width="200" alt="">
  </div>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        arr:[]
      }
    },
    methods: {
      del(id){
        if (confirm("您确定删除此图片吗?")){
          axios.get("/delete?id="+id).then(function () {
            location.reload();
          })
        }

      }
    },
    created:function () {
      axios.get("/select").then(function (response) {
        v.arr = response.data;
      })
    }
  })
</script>
</html>